<template>
<div @click="isShow=!isShow" class="open-category">{{ isShow?'关闭筛选':'展开筛选' }}</div>
<div class="pet-store-categories" v-if="isShow">
  <div>
    <el-text class="demonstration">类型：</el-text>
    <el-cascader style="width: 120px" :options="options" size="small" :show-all-levels="false" />
  </div>
  <div>
    <el-text class="demonstration">品牌：</el-text>
    <el-cascader style="width: 120px" :options="options" size="small" :show-all-levels="false" />
  </div>
  <div>
    <el-text class="demonstration">排序：</el-text>
    <el-select
      v-model="value"
      placeholder="Select"
      size="small"
      style="width: 120px"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </div>
  <div class="area-bottom">
    <el-tag effect="plain">
      促销专区
    </el-tag>
    <el-tag effect="plain">
      促销专区
    </el-tag>
    <el-tag effect="plain">
      促销专区
    </el-tag>
    <el-tag effect="plain">
      促销专区
    </el-tag>
  </div>
</div>

<div class="pet-store-categories" v-if="isShow" style="grid-template-columns:1fr 1fr">
  <div class="slider-demo-block">
    <span class="demonstration">价格区间：</span>
    <span class="demonstration">最小：<el-input
      v-model="minPrice"
      style="width: 100px"
      placeholder="Please input"
      size="small"
      :formatter="(value) => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
      :parser="(value) => value.replace(/\￥\s?|(,*)/g, '')"
    /></span>
    <span class="demonstration">最大：<el-input
      v-model="maxPrice"
      style="width: 100px"
      placeholder="Please input"
      size="small"
      :formatter="(value) => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
      :parser="(value) => value.replace(/\￥\s?|(,*)/g, '')"
    /></span>
  </div>
  <div class="span-slide">
    <el-slider v-model="priceRange" range :max="10" style="margin-top: 7px"/>
  </div>
</div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { ElTag } from 'element-plus';

let isShow = ref(false);
let minPrice = ref('');
let maxPrice = ref('');
let priceRange = ref([0, 10]);

const options = reactive([]);
</script>

<style scoped lang="scss">
.open-category {
  width: 1000px;
  height: 30px;
  background: gainsboro;
  text-align: center;
  line-height: 30px;
  font-size: 12px;
  opacity: 0.3; /* 加深 */
  margin:10px 0;
  border-radius: 15px;
  cursor: pointer; /* 显示手指 */
}
.open-category:hover{
  opacity: 0.7;
  font-weight: 500;
}
.pet-store-categories {
  max-width: 1000px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr;
}
.el-tag {
  white-space: nowrap; /* 防止标签换行 */
  cursor: pointer; /* 显示手指 */
}
.slider-demo-block > span {
  padding-right: 10px;
}
.demonstration {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  line-height: 44px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0;
}
.area-bottom span {
  margin: 8px;
}
</style>
